<template>
  <div class="editCurMan">
    <van-nav-bar title="修改当班人员" left-arrow="" @click-left='goBack()'></van-nav-bar>

    <div class="note" v-show="curinfo&&curinfo.length>0">
      <img src="../../assets/imgs/note.png" />
      <span>岗位成员之间请用空格隔开，每个岗位最多只能两人</span>
    </div>
    <div class="firstCell">
      <van-cell title="请选择班次">
        <div slot="default">
          <van-dropdown-menu :border="false" :hairline="false">
            <van-dropdown-item v-model="choiceCategory" :options="categorys" />
          </van-dropdown-menu>
        </div>
      </van-cell>
    </div>
    <div class="station" v-show="station">
      <van-field label="组长" @input='oninputmaster' :error-message="masterErr" v-model="master" placeholder="请输入姓名" required="" :clearable="true"></van-field>
      <van-field label="胎基" v-model="taiji" placeholder="请输入胎基人员" :clearable="true"></van-field>
      <van-field label="开机" v-model="open" placeholder="请输入开机人员" :clearable="true"></van-field>
      <van-field label="看膜" v-model="look" placeholder="请输入看膜人员" :clearable="true"></van-field>
      <van-field label="收卷" v-model="shoujuan" placeholder="请输入收卷人员" :clearable="true"></van-field>
      <van-field label="标签" v-model="brand" placeholder="请输入标签人员" :clearable="true"></van-field>
      <van-field label="返工" v-model="back" placeholder="请输入返工人员" :clearable="true"></van-field>
      <van-field label="码垛" v-model="maduo" placeholder="请输入码垛人员" :clearable="true"></van-field>
    </div>

    <div class="btn" v-show="curinfo&&curinfo.length>0">
      <van-button color="#62cff9" type="default" size="large" @click="saveSuccess">修改</van-button>
      <van-button type="default" size="large" @click='goBack()'>取消</van-button>
    </div>
    <div class="noData" v-show="showNodata">
      <img src="../../assets/imgs/nodata.png" />
      <div>
        <span>暂无班次信息，赶紧去添加吧 </span>
        <van-button plain="" type="default" color="#62cff9" @click='goAddCurman'>添加</van-button>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    Toast
  } from 'vant'
  export default {
    data() {
      return {
        masterErr:'',
        showNodata:false,
        curinfo:[],
        station:false,
        brand: '',
        open: '',
        look: '',
        maduo: '',
        back: '',
        shoujuan: '',
        taiji: '',
        master: '',
        choiceCategory: '',
        categorys: []
      }
    },
    watch:{
      choiceCategory(newVal){
        this.getCurInfo()
      }
    },
    created() {
      this.getBanci()
    },
    methods: {
      oninputmaster(){
        if(/[^\u4e00-\u9fa5]/.test(this.master)){
          this.masterErr = '请输入中文字符'
        }else{
          this.masterErr = ''
        }
      },
      goAddCurman(){
        this.$router.push({name:'addCurMan'})
      },
      //查询班次名称
      getBanci(){
        this.$axios.get('/Graders/getGradersName.do').then(res=>{
          if(res.data.status === 200){

            res.data.data.forEach(item=>{
              this.categorys.push({text:item,value:item})
            })
            if(res.data.data.length === 0){
              this.showNodata = true
            }else{
              this.showNodata = false
            }
          }else if(res.data.status === 500){
            Toast.fail({message:res.data.msg,duration:900})
          }else{
            Toast.fail({message:res.data.msg,duration:900})
          }
        }).catch(err=>{
          Toast.fail({message:'系统故障',duration:900})
        })
      },
      //根据班次查询当班信息
      getCurInfo(){
        this.$axios.post('/Graders/getGraders.do',{gradersName:this.choiceCategory}).then(res=>{
          if(res.data.status === 200){
            if(res.data.data.length === 0){
              this.station = false
              this.showNodata = true
            }else{
              this.station = true
              this.showNodata = false
              this.curinfo = res.data.data
              this.curinfo.forEach(item=>{
                if(item.stationName === '胎基'){
                  this.taiji = item.userName.split(',').join(' ')
                }else if(item.stationName === '组长'){
                  this.master = item.userName.split(',').join(' ')
                 }else if(item.stationName === '开机'){
                  this.open = item.userName.split(',').join(' ')
                 }else if(item.stationName === '看膜'){
                   this.look = item.userName.split(',').join(' ')
                 }else if(item.stationName === '收卷'){
                   this.shoujuan = item.userName.split(',').join(' ')
                 }else if(item.stationName === '标签'){
                   this.brand = item.userName.split(',').join(' ')
                 }else if(item.stationName === '返工'){
                   this.back = item.userName.split(',').join(' ')
                 }else if(item.stationName === '码垛'){
                   this.maduo = item.userName.split(',').join(' ')
                 }
              })
            }
          }
        })
      },
      saveSuccess() {
        if(this.masterErr) return
        console.log(this.curinfo)
        //对字符串扩展 多个空格变成一个空格
        String.prototype.ResetBlank = function() {
          var regEx = /\s+/g;
          return this.replace(regEx, ' ');
        };
        if (!this.master || !this.choiceCategory) {
          return Toast.fail({
            message: '请输入完整信息',
            addCurMan: 900
          })
        }
        console.log(this.look)

        if ((/[^\u4e00-\u9fa5\s]/g.test(this.look)) || (/[^\u4e00-\u9fa5\s]/g.test(this.back)) || (
            /[^\u4e00-\u9fa5\s]/g.test(
              this.maduo)) || (/[^\u4e00-\u9fa5\s]/g.test(this.shoujuan)) || (/[^\u4e00-\u9fa5\s]/g.test(this.open)) ||
          (/[^\u4e00-\u9fa5\s]/g.test(this.taiji)) || (/[^\u4e00-\u9fa5\s]/g.test(this.brand))) {
          return Toast.fail({
            message: '成员格式输入有误',
            duration: 900
          })
        }
       let reg = /^.*[\,，].*$/;
        //返工
        let back = []
        back = this.back.trim().ResetBlank().split(' ')

        //标签
        let brand = []
        brand = this.brand.trim().ResetBlank().split(' ')
        //看膜
        let look = []
        look = this.look.trim().ResetBlank().split(' ')
        //开机
        let open = []
        open = this.open.trim().ResetBlank().split(' ')
        //码垛
        let maduo = []
        maduo = this.maduo.trim().ResetBlank().split(' ')
        //胎基
        let taiji = []
        taiji = this.taiji.trim().ResetBlank().split(' ')
        //收卷
        let shoujuan = []
        console.log(this.taiji)
        shoujuan = this.shoujuan.trim().ResetBlank().split(' ')
        if (back.length > 2 || open.length > 2 || brand.length > 2 || look.length > 2 || taiji.length > 2 || shoujuan.length >
          2 || maduo.length > 2) {
          return Toast.fail({
            message: '每个岗位成员最多两个',
            duration: 900
          })
        }
        back = back.join(',')
        if(!reg.test(back)){
          back  = back + ','
        }
        open = open.join(',')
        if(!reg.test(open)){
          open  = open + ','
        }
        brand = brand.join(',')
        if(!reg.test(brand)){
          brand  = brand + ','
        }
        look = look.join(',')
        if(!reg.test(look)){
          look  = look + ','
        }
        taiji = taiji.join(',')
        if(!reg.test(taiji)){
          taiji  = taiji + ','
        }
        shoujuan = shoujuan.join(',')
        if(!reg.test(shoujuan)){
          shoujuan  = shoujuan + ','
        }
        maduo = maduo.join(',')
        if(!reg.test(maduo)){
          maduo  = maduo + ','
        }
        let data = [{
              'stationName': "组长",
              'userName': this.master.trim()
            },{
              'stationName': '胎基',
              'userName': taiji
            },{
              'stationName': '开机',
              'userName': open
            },{
              'stationName': '看膜',
              'userName': look
            },{
              'stationName': '收卷',
              'userName': shoujuan
            },{
              'stationName': '标签',
              'userName': brand
            },{
              'stationName': '返工',
              'userName': back
            },{
              'stationName': '码垛',
              'userName': maduo
            }]
        this.$axios.post('/Graders/updataGraders.do ',{"data":data,"gradersName":this.choiceCategory}).then(res => {
          if (res.data.status === 200) {
            Toast.success({
              message: '修改成功',
              duration: 900
            })
            this.getCurInfo()
          } else if (res.data.status === 500) {
            Toast.fail({
              message: res.data.msg
            })
          }
        }).catch(err => {
          Toast.fail({
            message: '添加失败',
            duration: 900
          })
        })
      }
    }
  }
</script>

<style scoped="scoped">
  .van-button--default{
    background: #ebedf0;
  }
  .noData{
    color: #666666;
    font-size: .8rem;
    text-align: center;
    margin-top: 30%;
  }
  .note {
    padding: .5rem;
    margin-bottom: .7rem;
  }

  .note img {
    vertical-align: middle;
  }

  .note span {
    font-size: .76rem;
    color: #333333;
  }

  .van-dropdown-menu {
    height: 1.25rem;
    line-height: 1.25rem;
  }

  .firstCell .van-cell__title {
    flex: .35;
  }

  .van-button--large {
    height: 2.3rem;
    line-height: 2.3rem;
    margin-bottom: 1rem;
  }

  .btn {
    padding: 0.8rem;
  }
</style>
